<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>图标显示</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{lib/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{css/public.css}" media="all">
</head>
<body>


<div class="layui-card">
    <div class="layui-card-header">部门人数分布</div>
    <div class="layui-card-body">
        <div id="DeptEchart" style="width: 500px;height: 500px;"></div>
    </div>
</div>

<script th:src="@{lib/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{js/lay-config.js?v=1.0.4}" charset="utf-8"></script>
<script th:src="@{lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
<script th:src="@{js/echarts.js}"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('DeptEchart'));
    myChart.resize(
        {
            width: 1000,
            height: 500
        }
    );
    var url="[[@{/chart/getDeptData}]]";
    var arrName=[];
    var arrNumber=[];
    $.post(url,function (data) {
        console.log(data);
        for(i in data)
        {
            arrName.push(i);
            arrNumber.push(data[i]);
        }
        var option = {
            title: {
                text: '部门人数统计'
            },
            tooltip: {},
            legend: {
                data:["人数"]
            },
            xAxis: {
                data:arrName
            },
            yAxis: {},
            series: [
                {
                    name: '人数',
                    type: 'bar',
                    data: arrNumber
                }
            ]
        };
        myChart.setOption(option);
    })
</script>
</body>
</html>